<template>
	<div class="bg">
		<loading v-show='!show'></loading>
		<div>
			<h3>{{$t('home.logLabel')}}</h3>
			<button class="small-btn button button--aylen" @click="goDetail">{{$t('home.detailBtn')}}</button>
		</div>
		<transition name='fade'>
		<table class="logcontent" v-show="show">
			<tbody>
				<tr v-for='(item,index) in event_log' :key="index">
					<td>{{item.timestamp.substr(0,item.timestamp.lastIndexOf(':'))}}</td>
					<td>
						<p>{{item.content}}</p>
					</td>
				</tr>
			</tbody>
		</table>
		</transition>
		
	</div>
</template>
<script>
	import loading from 'components/common/loading'
	export default {
		props: {
			event_log: {
				type: Array,
				required: true
			},
			show:{
				type:Boolean,
				required:true
			}
		},
		components:{
			loading
		},
		methods: {
			goDetail() {
				this.$router.push('/logManage/eventlog')
			}
		}
	}
</script>
<style scoped>
	.bg {
		background: #FFFFFF;
		margin-top: 20px;
		padding: 5px 20px;
		height: 260px;
		position: relative;
	}
	
	h3 {
		height: 30px;
		line-height: 30px;
		display: inline-block;
		font-size: 14px;
	}
	.button {
		float: right;
		margin-top: 5px;
	}
	td {
		width: 360px;
		text-align: center;
	}
	td:nth-child(2)>p{
		max-width: 340px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		padding:0 5px;
	}
	tbody tr:nth-child(2n+1) {
		background: #ecf1f8;
	}
  table	tbody tr td{
		border: none;
	}
</style>